<!DOCTYPEHTML>
<html>
<head>
<meta charset="utf-8">
<title>图片画廊</title>
<style type="text/css">
body {
	background:url(images/bark.jpg);
}
#gallery {
	margin: 10px auto;
	padding: 40px;
	list-style:none;
	width:530px;
}
#gallery li {
	float:left;
	width:106px;
	height:80px;
	overflow:visible;
}
#gallery li a {
	color:#333;
	text-decoration:none;
	font-size:4px;
	display:block;
	text-align:center;
	background-color:#FFF;
	padding:3px;	
	opacity:0.8;
	box-shadow:0 0 5px 2px #333;
	/* 设计动画过渡效果 */
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	transition: all 500ms linear;
	/* 自定义变形原点 */
	-webkit-transform-origin:0 0;
	-moz-transform-origin:0 0;
	transform-origin:0 0;
	/* 旋转变形 */
	-webkit-transform:rotate(-15deg);
	-moz-transform:rotate(-15deg);
	transform:rotate(-15deg);
}
#gallery li a img {
	width:100px;
}
#gallery li:nth-child(3n) a {
	-webkit-transform:rotate(20deg);
	-moz-transform:rotate(20deg);
	transform:rotate(20deg);
}
#gallery li:nth-child(4n) a {
	-webkit-transform:rotate(15deg);
	-moz-transform:rotate(15deg);
	transform:rotate(15deg);
}
#gallery li:nth-child(7n) a {
	-webkit-transform:rotate(-10deg);
	-moz-transform:rotate(-10deg);
	transform:rotate(-10deg);
}
#gallery li:nth-child(9n) a {
	-webkit-transform:rotate(-20deg);
	-moz-transform:rotate(-20deg);
	transform:rotate(-20deg);
}
#gallery li a:hover {
	position:relative;
	z-index: 999;
	opacity: 1;
	/* 旋转并放大 */
	-webkit-transform: rotate(0deg) scale(2);
	-moz-transform: rotate(0deg) scale(2);
	transform: rotate(0deg) scale(2);
}
#gallery li a:hover:after {
	content:attr(title);  /* 添加title属性内容 */
}
</style>
</head>
<body>
<ul id="gallery">
  <li><a href="#" title="图片1"><img src="images/image1.jpg" alt="图片1" /></a></li>
  <li><a href="#" title="图片2"><img src="images/image2.jpg" alt="图片2" /></a></li>
  <li><a href="#" title="图片3"><img src="images/image3.jpg" alt="图片3" /></a></li>
  <li><a href="#" title="图片4"><img src="images/image4.jpg" alt="图片4" /></a></li>
  <li><a href="#" title="图片5"><img src="images/image5.jpg" alt="图片5" /></a></li>
  <li><a href="#" title="图片6"><img src="images/image6.jpg" alt="图片6" /></a></li>
  <li><a href="#" title="图片7"><img src="images/image7.jpg" alt="图片7" /></a></li>
  <li><a href="#" title="图片8"><img src="images/image8.jpg" alt="图片8" /></a></li>
  <li><a href="#" title="图片9"><img src="images/image9.jpg" alt="图片9" /></a></li>
  <li><a href="#" title="图片10"><img src="images/image10.jpg" alt="图片10" /></a></li>
  <li><a href="#" title="图片11"><img src="images/image11.jpg" alt="图片11" /></a></li>
  <li><a href="#" title="图片12"><img src="images/image12.jpg" alt="图片12" /></a></li>
  <li><a href="#" title="图片13"><img src="images/image13.jpg" alt="图片13" /></a></li>
  <li><a href="#" title="图片14"><img src="images/image14.jpg" alt="图片14" /></a></li>
  <li><a href="#" title="图片15"><img src="images/image15.jpg" alt="图片15" /></a></li>
</ul>
</body>
</html>
